<template>
    <el-dialog :title="actionBoat+'理箱清单'" :visible.sync="dialogForm" width="1100px">
        <el-row type="flex" justify="center">
            <h3>{{actionBoat}}理箱清单</h3>
            <el-button class="load-position-btn" @click="handlePrint">打 印</el-button>
            <el-button class="load-position-btn" @click="handleExport">导出EXCEL</el-button>
        </el-row>
        <el-form :inline="true" ref="form" :model="form" class="detail-form" label-width="120px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="船代：">
                        {{ form.accountUnit }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="结算月度：">
                        {{ form.accountMonth }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="发生日期：">
                        {{closeTime}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="船名：">
                        {{shipName}}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="航次：">
                        {{voyage}}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="封航日期：">
                        {{closeTime}}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="list" border stripe max-height="500" class="mt-10">
            <el-table-column prop="containerId" label="箱号"  min-width="120"></el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="80"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="80"></el-table-column>
            <el-table-column prop="tradeType" label="内外贸"  min-width="90">
                <template slot-scope="scope">
                    {{ scope.row.tradeType | _filterTradeType }}
                </template>
            </el-table-column>
            <el-table-column prop="ef" label="空重"  min-width="80">
                <template slot-scope="scope">
                    {{ scope.row.ef | _filterIfHeavyType }}
                </template>
            </el-table-column>
            <el-table-column prop="change" label="中转"  min-width="80">
                <template slot-scope="scope">
                    {{ scope.row.change | _filterIsChange }}
                </template>
            </el-table-column>
            <el-table-column prop="enchaseWay" label="装箱方式"  min-width="110" v-if="isZC">
                <template slot-scope="scope">
                    {{ scope.row.enchaseWay | _filterEnchaseWayType }}
                </template>
            </el-table-column>
            <el-table-column prop="sealNo" label="铅封号"  min-width="110"></el-table-column>
            <el-table-column prop="billNumber" label="提单号"  min-width="110"></el-table-column>
            <el-table-column prop="position" label="装船位置"  min-width="110" v-if="isZC"></el-table-column>
            <el-table-column prop="cargoName" label="货名"  min-width="110"></el-table-column>
            <el-table-column prop="cargoCount" label="件数"  min-width="110"></el-table-column>
        </el-table>
    </el-dialog>
</template>

<script>
    import { getBalanceShipList } from "@/api/balance/balance";
    import { newExportExcel } from "@/utils/newExport";
    import { getLocalTime } from "@/utils/dateFormat";
    export default {
        name: "loadForm",
        props:{
            form: {},
        },
        data() {
            return {
                list: [],
                dialogForm: false,
                id:'',
                planNo:'',
                createTime:'',
                actionBoat:'',
                shipName:'',
                voyage:'',
                closeTime:'',
                isZC : true
            }
        },
        methods: {
            loadData(id, detailId) {
                this.id=id
                this.planNo=detailId
                getBalanceShipList(id, detailId).then(res => {
                    this.list = res.data.detailData
                    if (res.data.planType === 'ZC'){
                        this.actionBoat = "装船"
                    } else if (res.data.planType === 'XC') {
                        this.actionBoat = "卸船"
                        this.isZC = false
                    }
                    console.log(this.actionBoat)
                    this.shipName = res.data.shipName
                    this.voyage = res.data.voyage
                    this.closeTime = getLocalTime(res.data.closeTime, 'YYYY-MM-DD')
                })
            },
            handlePrint(){
                const origin = window.location.origin + window.location.pathname
                const route = `/#/ShipDetail/`
                window.open(`${origin}${route}${this.id}/${this.planNo}`);
            },
            handleExport() {
                let map = new Map();
                map.set('containerId', '箱号')
                map.set('containerType', '箱型')
                map.set('containerSize', '尺寸')
                map.set('tradeType', '内外贸')
                map.set('ef', '空重')
                map.set('change', '中转')
                if (this.isZC == true){
                    map.set('enchaseWay', '装箱方式')
                }
                map.set('sealNo', '铅封号')
                map.set('billNumber', '提单号')
                if (this.isZC == true){
                    map.set('position', '装船位置')
                }
                map.set('cargoName', '货名')
                map.set('cargoCount', '件数')
                getBalanceShipList(this.id, this.planNo).then(res => {
                    let exportRecords = [];
                    let exportArr = res.data.detailData;
                    exportArr.forEach(record => {
                        let exportRecord = {};
                        for (let [key, value] of map.entries()) {
                            if (key === 'enchaseWay') {
                                exportRecord[value] = (record[key] == 'GZ' ? '港装' : record[key] == 'CZ' ? '厂装' : '')
                            } else {
                                exportRecord[value] = record[key];
                            }
                        }
                        exportRecords.push(exportRecord);
                    });
                    newExportExcel("("+this.closeTime+"-"+this.shipName+"-"+this.voyage+")"+this.actionBoat+"理箱清单", exportRecords);
                })
            },
        },
        filters: {
            filterDate(val) {
                return val ? val.substr(0, 10) : ''
            }
        }
    }
</script>

<style scoped>
    .load-position-btn {
        position: relative;
        right: -410px;
        top: 0px;
    }
</style>
